<template>
  <view>
    <p class="withDrawInfo ">{{$t('提现佣金')}}：{{withdraw_amount}}</p>
    <u-subsection :list="list" :current="current" @change="change"></u-subsection>
    <view>
      <div v-for="(item,index) in withDrawList" :key="index" class="item">
        <h4>
          <span class="leftName">{{$t('提现单号')}}:</span>
          {{item.tx_number}}</h4>
        <div class="u-m-t-10 u-m-b-10">
          <u-tag :text="[$t('待审核'),$t('审核通过'),$t('审核拒绝')][item.status]"  :type="['warning','success','info'][item.status]"  size="mini" class="u-m-r-15" />
          <u-tag :text="[$t('待打款'),$t('打款成功'),$t('打款失败')][item.pay_status]"   :type="['warning','success','info'][item.pay_status]" size="mini"/>
        </div>
        
        
        <span class="leftName">{{$t('提现时间')}}:</span>
        {{item.create_time}}</p>
        <p>
          <span class="leftName">{{$t('打款时间')}}:</span>
          {{item.pay_time}}</p>
        <p>
          <span  class="leftName">{{$t('提现金额')}}:</span>
          <span class="uk-text-600 u-font-lg" :style="{color:$u.color['warning']}"> {{item.amount}}</span>
        </p>
      </div>
    </view>
    
    <u-empty class="u-m-t-60" text="暂无数据" icon-size="240" mode="data" v-if="withDrawList.length===0"></u-empty>
  </view>
</template>

<script>
export default {
  data(){
    return{
      list: [
        {
          name: this.$t('全部')
        },
        {
          name: this.$t('待审核')
        },
        {
          name: this.$t('待打款')
        },
        {
          name: this.$t('已打款')
        },
        {
          name: this.$t('无效')
        }
      ],
      current: 0,
      withdraw_amount:"0.00",
      cache:{},
      cacheMap:new Map(),
      withDrawList:[],
      page:1,
    }
  },
  onLoad(){
    this.getWithdrawList()
  },
  methods:{
    async change(e){
      await  (this.current = e)
      if(this.cacheMap.has(e)){
        const target= this.cacheMap.get(e)
        console.log(target)
        this.withDrawList = target.list
        this.page = target.page
      }else{
        this.page=1
        this.getWithdrawList()
      }
      
    },
    getWithdrawList(){
      const data = {
		page: this.page,
        status: this.current+1
      }
      this.$http.getCommissionWithdrawList(data).then(res=>{
        this.withdraw_amount = res.data.withdraw_amount
        let list = res.data.withdraw_list
        this.$nextTick(()=>{
          // this.withDrawList = res.data.withdraw_list
          if(this.page===1){
            this.withDrawList = list
          }else{
            this.withDrawList =  this.withDrawList.concat(list)
          }
          this.addCache(this.withDrawList)
          // this.$set(this,'withDrawList',res.data.withdraw_list)
        })
      })
    },
    addCache(list,current){
      this.cacheMap.set(this.current,{list,page:this.page})
      console.log( this.cacheMap)
    }
  }
}
</script>

<style lang="scss" scoped >
@import "uview-ui/index.scss";
.withDrawInfo{
  background-color: $u-type-error;
  color: #fff;
  padding: 20upx;
  font-weight: 600;
}
.item{
  background-color: #fff;
  margin-bottom: 4upx;
  padding:20upx 30upx;
}
.leftName{
  margin-right: 15upx;
}

</style>
